<%@ Page Title="" Language="C#" MasterPageFile="~/SiteDesign.master" AutoEventWireup="true" CodeFile="ModalPopupDemo.aspx.cs" Inherits="AJAXDemos_ModalPopupDemo" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajax" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <title>AJAX Modal Popup Demo</title>
    <style type="text/css">
        .DimBackground
        {
            background-color:#CCCCFF;
            filter:alpha(opacity=40);
            opacity:0.5;
        }
        .DimBackground2
        {
            background-color:#cccccc;
            filter:alpha(opacity=80);
            opacity:0.8;
        }
        .PopupBackground
        {
            background-color:#ffffdd; 
            border-width:3px; 
            border-style:solid; 
            border-color:Gray; 
            padding:3px; 
            width:250px; 
        }
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="AboutDemoContent" Runat="Server">
    <h2>ModalPopupExtender</h2>
    <div>This page demonstrates the AJAX Modal Popup extender. To use this, I created a simple 
        <span class="codeSample">&lt;asp:LinkButton .../&gt;</span> control to act as the 
        &quot;trigger&quot; for the popup. The popup was an <span class="codeSample">&lt;asp:Panel&gt;</span> control that contained the 
        stuff I wanted to pop up. I placed a simple textbox and link button in the 
        panel.</div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="DemoContent" Runat="Server">

    <div>
        <h2>Live Sample</h2>
        <asp:LinkButton ID="SubmitButton" runat="server" Text="Submit" />
        <ajax:ModalPopupExtender ID="SubmitButton_ModalPopupExtender" runat="server" 
            BackgroundCssClass="DimBackground" DropShadow="True" DynamicServicePath="" 
            Enabled="True" PopupControlID="PopupPanel" TargetControlID="SubmitButton" >
        </ajax:ModalPopupExtender>
        &nbsp;<asp:Label ID="Results" runat="server" />
    </div>
    <asp:Panel ID="PopupPanel" runat="server" CssClass="PopupBackground">
        <div>
                Enter your name:
                <asp:TextBox ID="PersonName" runat="server"></asp:TextBox>
                &nbsp;<asp:LinkButton ID="SubmitName" runat="server" onclick="SubmitName_Click">Submit Name</asp:LinkButton>
        </div>
    </asp:Panel>
    <div>
        <hr />
        <h2>How to Use</h2>
        <p>
            <asp:Image ID="Image1" runat="server" ImageAlign="Left" 
                ImageUrl="~/Images/AddExtenderToButton.png" />
            To add a ModalPopup Extender to a button, click the smart tag and select &quot;Add 
            Extender...&quot;. In the resulting dialog box, select the Modal Popup Extender and 
            click OK. Set the extender&#39;s PopupControlID property to the ID of the panel that 
            contains what you want to act as a popup dialog.</p>
        <p>
            There are a number of other properties you can set for the extender, such as the 
            CSS style to apply to the background when the popup is shown and whether or not 
            to display a shadow for the popup. </p>
        <p>
            <img alt="Add Extender Dialog Box" src="../Images/ModalPopupExtender.png" 
                style="width: 752px; height: 560px" /></p>
    </div>
</asp:Content>

